<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3_BorderRadius_Text_Transition_Animation</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}
		header{
			padding: 20px 0;
			text-align: center;
		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example  div{
            width: 350px;
            height: 300px;
            margin: 100px 500px;
            border: 1px solid purple;
            /*
                value: 所有的
                value value: 上下  左右
                value value value: 上  左右  下
                value value value value: 上 右  下  左
            */
            /*  斜扛左边是水平方向的值 / 斜扛右边是垂直方向的值 */
            border-radius: 20px 30px 40px 50px / 10px 25px 35px 45px;
        }
		.exa1 li{
            list-style: none;
            background-color: rgba(0,0,0,0.1);
            border-bottom: 1px solid purple;
        }
        .exa1 ul{
            width: 150px;
            height: 600px;
            margin-left: 600px;
            /*border-radius: 150px; 在部分手机里 50% 可以无效，最好具体数值

            */
        }
        .exa1 .normal{
            white-space:normal;
        }
        .exa1 .nowrap{
            white-space:nowrap;
        }
        .exa1 .pre{
            white-space:pre;
        }
        .exa1 .pre-line{
            white-space:pre-line;
        }
        .exa1 .pre-wrap{
            white-space:pre-wrap;
        }
		.exa2 div{
            width: 350px;
            height: 150px;
            margin: 50px auto;
            border: 1px dashed purple;
        }
        .exa2 .box1{
            Word-wrap:break-word; /* 可读性比较高 善良  至于对不对齐，好不好看，不关 心*/
        }
        .exa2 .box2{
            word-break:break-all; /*强制换行 非常霸道*/
        }
		.exa3 div{
            width: 350px;
            height: 350px;
            margin: 50px auto;
            border: 1px dashed purple;
            /*text-align: right;*/
            direction: rtl;  /*l left r right*/
            unicode-bidi:bidi-override;
        }
        .exa3 span{
            /*float: right;*/
        }
        .exa4 div{
	           width: 350px;
	           height: 350px;
	           margin: 50px auto;
	           border: 1px dashed purple;
	           white-space:nowrap;
	           overflow: hidden;
	           text-overflow:ellipsis;
	       }
       .exa5 div{
          width: 350px;
          height: 150px;
          margin: 50px auto;
          border: 1px dashed purple;
          text-align: center;
          line-height: 150px;
          font-size: 60px;
          color: #ddd;

      }
      .exa5 .box1{
          text-shadow: 1px 1px 5px #000;  /*x y 模糊度 颜色*/
      }
      .exa5 .box2{
          color:#fff;text-shadow:2px 2px 4px #000;

      }
      .exa5 .box3{
          color:#fff;
          text-shadow:
                  0 1px 0 #ccc,
                  0 2px 0 #9c9c9c,
                  0 3px 0 #bbb,
                  0 4px 0 #9b9b9b,
                  0 5px 0 #aaa;
      }
      .exa5 .box4{
              /* x y 模糊度 尺寸 颜色 */
          box-shadow:inset 2px 2px 2px 3px #000;
      }
      .exa6 div{
	           width: 350px;
	           height: 150px;
	           margin: 50px auto;
	           border: 1px dashed purple;
	           text-align: center;
	           line-height: 150px;
	           font-size: 60px;
	           color: #ddd;
	           -webkit-text-stroke:1px #ff00ff;
	           text-shadow:
	               0 0 10px #f3c,
	               0 0 20px #f39,
	               0 0 40px #f33,
	               0 0 60px #f30;
	           text-transform:lowercase;
	       }
		.exa7 div{
            width:100px;
            height: 1000px;
            background: goldenrod;
            /*-webkit-transition: 5s;
            -moz-transition: 5s;
            -ms-transition: 5s;*/
            /*transition: 5s;*/
            /*transition: none;*/
            opacity: 0;
            color:#ccc;
        }
        .exa7 .on{
            width: 1000px;
            opacity: 1;
            /*transition-property: all;
            transition-duration: 5000ms;
            !*transition-delay: 2000ms;*!
            transition-timing-function: cubic-bezier(.75,.07,.93,.44) ;*/

            transition:/*all*/ 5s /*2s*/ cubic-bezier(.75,.07,.93,.44);
        }
        .exa8 #box2{
           width: 600px;
           height: 600px;
           box-shadow: 0 0 5px #000;
           position: relative;
           margin: 50px auto;
       }
       .exa8 #move2{
           position: absolute;
           left: 0;
           top: 0;
           width: 100px;
           height: 100px;
           background: greenyellow;
       }

       .exa8 #box2 .on{
           /*-webkit-animation: move 6s linear;
           -moz-animation: move 6s linear;
           -ms-animation: move 6s linear;*/
           -o-animation: move 6s linear;
           animation: move 6s linear;
       }
       .exa8 #box2 .active{
           animation: active 2s linear 3 alternate;
           /*animation-fill-mode:forwards;*/
       }
       /*#box2 .hover{
           animation: on 6s linear infinite;
       }*/
       /*@-webkit-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-moz-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-ms-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-o-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       */
       @keyframes on {
           0%{
               left:0;
               top:0;
           }
           25%{
               left:500px;
               top:0;
           }
           50%{
               left:500px;
               top:500px;
           }
           75%{
               left:0;
               top:500px;
           }
           100%{
               top:0;
               left: 0;
           }
       }
       @keyframes active {
           0%{
               top:0;
           }
           100%{
               top:500px
           }

       }
       .exa8 #box2:hover .hover{
           animation-play-state:paused;
       }
	</style>
</head>
<body>
	<header class="true">
		<h1>CSS3_BorderRadius_Text_Transition_Animation</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、圆角</h4>
			<p>
				border-radius:上 右 下 左; //取值和margin风格类似
				border-top-left-radius:
				border-top-right-radius:
				border-bottom-left-radius:
				border-bottom-right-radius:
				20px 30px 40px 50px/40px 50px 60px 70px;
				斜线左边是水平方向 / 斜线右边是垂直方向
			</p>
			<h4>二、文本属性</h4>
			<p>
				1.white-space: 空格/缩进/换行的处理方式 
					normal 默认 忽略多个空格/缩进/换行只留一个
					nowrap 控制文本不换行
					pre 空白/缩进/换行 会被浏览器保留
					pre-line 合并空白/缩进  保留换行符
					pre-wrap 保留空白/缩进  正常换行

				2.Word-wrap:break-word 与 word-break:break-all 

				3.文本从右向左显示：
					direction:rtl;   //ltr rtl (left to right/right to left)
					unicode-bidi:bidi-override;


					Direction  定义文本的方向 / 书写方向(全兼容)
					rtl 		从右向左排列
					ltr 		从左向右排列
					注意要配合unicode-bidi 一块使用
					unicode-bidi 属性设置文本的方向
						bidi-override

					writing-mode书写方向
					horizontal-tb水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
					vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
					vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
					lr-tb：左-右，上-下。（IE私有值lr-tb）
					tb-rl：上-下，右-左。（IE私有值tb-rl）

				4.文本超出显示省略号

					前端只是一个效果

					单行超出显示省略号：  低版本 ie不兼容
					white-space:nowrap; /*文本不换行*/
					overflow:hidden; /*超出隐藏*/
					text-overflow:ellipsis; /*显示省略号*/

				5.text-shadow: 文字阴影
					参数：x方向偏移 y方向偏移 模糊度 颜色

					参数
					h-shadow		必需。水平阴影的位置。允许负值。
					v-shadow		必需。垂直阴影的位置。允许负值。
					blur			可选。模糊的半径。
					color			可选。阴影的颜色

					阴影叠加（可重复叠加）
					text-shadow:2px 2px 0px red, 2px 2px 4px green; <mark>先渲染后面的，再渲染前面的</mark>

					浮雕例子:
						color:#fff;text-shadow:2px 2px 4px #000;
					立体字:
						color:#fff;
						text-shadow:0 1px 0 #ccc,0 2px 0 #9c9c9c,0 3px 0 #bbb,0 4px 0 #9b9b9b,0 5px 0 #aaa;
					模糊字:
						color:rgba(0,0,0,0); text-shadow:0 0 20px blue;
					层叠：
						color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
					光晕：
color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
					火焰文字：
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;


				5.1.元素阴影
				box-shadow:inset x y 模糊度 尺寸 颜色

				6.文字描边、文字填充
					text-stroke:/*宽 颜色*/ 描边 加兼容前缀
					text-fill-width:/*宽度*/ /设置或检索对象中的文字的描边厚度
					text-fill-color:/*颜色*/ 填充色 /设置或检索对象中的文字的描边颜色

					霓虹灯：
						text-shadow:0px 0px 10px #f3c,0px 0px 20px #f39,0px 0px 40px #f33,0px 0px 60px #f30;
						-webkit-text-stroke:1px #ff00ff;

				7.文字大小写 text-transform:
					none：	默认值 无转换 
					capitalize：将每个单词的第一个字母转换成大写 
					uppercase：	转换成大写 
					lowercase：	转换成小写

				8.自定义字体
					@font-face {   
					    font-family: ‘iconfont';	/*自定义字体名称*/

					    src: url('iconfont.eot'); 	/*字体路径*/
					    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
					         url('iconfont.woff') format('woff'),
					         url('iconfont.ttf') format('truetype'),
					         url('iconfont.svg#untitledregular') format('svg');
					}

					生成兼容代码http://www.fontsquirrel.com/fontface/generator
			</p>
			 <h4>三、过渡</h4>
			 <p>
		 	  	1.transition: property duration delay timing-function;

		 	  	transition-property:过渡属性的名称
			 	  	none   没有过渡属性
			 	  	all        所有属性都过渡(默认值)
			 	  	property    具体属性名称(property1,property2...)

		 	  	transition-duration:过渡属性花费的时间
		 	  		秒/毫秒

		 	  	transition-delay:过渡效果延迟时间
		 	  		秒/毫秒

		 	  	transition-timing-function:过渡效果速度曲线 运动形式
			 	  	linear /  规定以相同速度开始至结束的过渡效果
			 	  	ease /  规定慢速开始，然后变快，然后慢速结束的过渡效果
			 	  	ease-in / 规定以慢速开始的过渡效果
			 	  	ease-out / 规定以慢速结束的过渡效果
			 	  	ease-in-out  规定以慢速开始和结束的过渡效果

			 	  	cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） 

			 	  		X1 起点在X轴的坐标,为0~1
			 	  		Y1 起点在Y轴的坐标,不限
			 	  		X2 终点在X轴的坐标,为0~1
			 	  		Y2 终点在Y轴的坐标,不限

			 	  		起点:对应的 y=x 为匀速， y&gt;x 为加速   y&gl;x 为减速
			 	  		终点:对应的 y=x 为匀速， y&gt;x 为减速   y&gl;x 为加速

			 	  	<a href="http://matthewlein.com/ceaser" target="_new"></a>参考：http://matthewlein.com/ceaser</a>

		 	  	1.1 多属性不同步变化 transition:width 2s,height 1s 2s;

		 	  	2.过渡完成事件：

		 	  	Webkit内核： 

		 	  	obj.addEventListener('webkitTransitionEnd',function(){});

		 	  	标准:  obj.addEventListener('transitionend',function(){});
			 </p>
			 <h4>四、动画</h4>
			 <p>
			 	1.animation: name duration <mark>delay</mark> timing-function iteration-count fillmode/play-state;
			 		1.1 animation-name: 动画名称
		 				keyframename  自定义的名字
		 				none  无动画效果

			 		1.2 animation-duration: 动画执行时间

			 		1.3 animation-delay:动画效果延迟时间

			 		1.4 animation-timing-function: 动画速度曲线
			 			linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier()

		 			1.5 animation-iteration-count: 	动画执行循环次数 
		 					infinite  无限次 | &gl;number&gt;（默认 1）

		 			1.6 animation-direction:	动画是否反向运动
		 					normal：	（默认）		正常方向 
				 			reverse：			反方向运行 
				 			alternate：		动画先正后反方向运行	
				 			alternate-reverse：	先反后正方向运行

	 				1.7 animation-play-state:	动画执行状态
		 					running：运动（默认）
		 					paused：暂停

	 				1.8 animation-fill-mode:	动画对象动画时间之外的状态
		 					none （默认）	原始状态>动画>原始状态
		 					forwards	原始状态>动画>停在动画帧100%
		 					backwards	(忽略原始状态)进入动画帧0%>动画>原始状态
		 					both		(忽略原始状态)进入动画帧0%>动画>停在动画帧100%
		 				


			 	2.@keyframes:规定动画
			 			@keyframes animationname {keyframes-selector {css-styles;}}

			 			animationname 定义动画的名称。

			 			keyframes-selector 动画时长的百分比。
			 				0-100%
			 				from（与 0% 相同）
			 				to（与 100% 相同）
			 				可以只有to
			 			css-styles  一个或多个合法的 CSS 样式属性。

			 			例如：
			 				 	@keyframes  run {
			 						0%{width:0px,background:red;}
			 						100%{width:500px,background:greend;}
			 					}
			 			当帧动画一样的时候：	例如：
			 				 	@keyframes  run {
			 						0%{width:0px,background:red;}
			 						20%{width:0px,background:red;}
			 						80%{width:500px,background:greend;}
			 						100%{width:500px,background:greend;}
			 					}
			 			可以写成
			 					@keyframes  run {
			 						0%，20%{width:0px,background:red;}
			 						80%，100%{width:500px,background:greend;}
			 					}

					2.动画事件：
						动画开始触发：
							obj.addEventListener("webkitAnimationStart", fn);
							obj.addEventListener("animationstart", fn);

						动画执行过程中触发：
							obj.addEventListener("webkitAnimationIteration", fn);
							obj.addEventListener("animationiteration", fn);

						动画结束触发：
							obj.addEventListener('webkitAnimationEnd',fn);
							obj.addEventListener('animationend',fn);
			 </p>
			 <h4>五、新增颜色rgba/hsla</h4>
			 <p>
			 	rgba(R,G,B,A) 透明颜色值
			 	HSL：
			 	 	  H:Hue(色调)。
			 		
		 				0(或360)表示红色，            120表示绿色，240表示蓝色，取值为：0 - 360

			 	S：Saturation(饱和度)

			 			取值为：0% - 100%   	 值越大颜色越纯

			 	L	Lightness（亮度）
			 			取值为（0%-100%）    	变暗 < 50%最纯  >变亮

			 	例如：background:hsl(360,100%,50%);

			 	HSLA：
			 		
			 	A：
			 		Alpha透明度。	取值0~1之间。

			 	currentcolor 当前色      currentcolor等于当前的color值
			 </p>
			
		</article>
	</section>
	<section class='example'>
		<p>
			width: 350px;
            height: 50px;
            margin: 100px auto;
            border: 1px solid purple;
            /*
                value: 所有的
                value value: 上下  左右
                value value value: 上  左右  下
                value value value value: 上 右  下  左
            */
            /*  斜扛左边是水平方向的值 / 斜扛右边是垂直方向的值 */
            border-radius: 20px 30px 40px 50px / 10px 25px 35px 45px;
		</p>
		<div></div>
	</section>
	<section class="exa1">
		<p>
			li{
	            list-style: none;
	            border-bottom: 1px solid purple;
	        }
	        ul{
	            width: 150px;
	            margin: 50px auto;
	            /*border-radius: 150px; 在部分手机里 50% 可以无效，最好具体数值

	            */
	        }
	        .normal{
	            white-space:normal;
	        }
	        .nowrap{
	            white-space:nowrap;
	        }
	        .pre{
	            white-space:pre;
	        }
	        .pre-line{
	            white-space:pre-line;
	        }
	        .pre-wrap{
	            white-space:pre-wrap;
	        }
		</p>
		<ul>
	        <li class="normal">面朝大海     春暖花开    春暖花开</li>
	        <li class="nowrap">面朝大海 春暖花开 春暖花开</li>
	        <li class="pre">    面朝大海            春暖花开
	            是的没错</li>
	        <li class="pre-line">   面朝大海    春暖花开
	            是的没错
	        </li>
	        <li class="pre-wrap">   面朝大海    春暖花开</li>
	    </ul>
	</section>
	<section class="exa2">
		<p>
			div{
	            width: 350px;
	            height: 150px;
	            margin: 50px auto;
	            border: 1px dashed purple;
	        }
	        .box1{
	            Word-wrap:break-word; /* 可读性比较高 善良  至于对不对齐，好不好看，不关 心*/
	        }
	        .box2{
	            word-break:break-all; /*强制换行 非常霸道*/
	        }
		</p>
		<div class="box1">
	        法国美女
	        2016趋势：金属光泽如果你的衣橱中更多的是基本款和暗色，那你更需要breakWorddddd的是一些可以点亮它们的关aaaaaaaaaaaaaaaaaa键单品，比如从2015年秋冬就开始兴起的金属色潮流，111111111111111111111111111111111111111
        </div>
	    <div class="box2">
	        法国美女
	        2016趋势：金属光泽金属光泽 wordBreak  如果你的衣橱中更多的是基本款和暗色，那你更需要的是一些可以点亮它们的关键单品，比如从2015年秋冬就开始兴起的金属色潮流，...
	    </div>
	</section>
	<section class="exa3">
		<p>
			div{
	            width: 350px;
	            height: 150px;
	            margin: 50px auto;
	            border: 1px dashed purple;
	            /*text-align: right;*/
	            direction: rtl;  /*l left r right*/
	            unicode-bidi:bidi-override;
	        }
	        span{
	            /*float: right;*/
	        }
	        txt.innerHTML += (txt.innerHTML.charAt(0)+'我是加的 !!!  ');
		</p>
		<div>  <span id="txt">面朝大海 春暖花开</span> </div>
	</section>
	<section class="exa4">
		<p>
			div{
		           width: 350px;
		           height: 150px;
		           margin: 50px auto;
		           border: 1px dashed purple;
		           white-space:nowrap;
		           overflow: hidden;
		           text-overflow:ellipsis;
		       }
		</p>
		<div> 面朝大海 春暖花开 面朝大海 春暖花开 面朝大海 春暖花开</div>
	</section>
	<section class="exa5">
		<p>
			div{
			           width: 350px;
			           height: 150px;
			           margin: 50px auto;
			           border: 1px dashed purple;
			           text-align: center;
			           line-height: 150px;
			           font-size: 60px;
			           color: #ddd;

			       }
			       .box1{
			           text-shadow: 1px 1px 5px #000;  /*x y 模糊度 颜色*/
			       }
			       .box2{
			           color:#fff;text-shadow:2px 2px 4px #000;

			       }
			       .box3{
			           color:#fff;
			           text-shadow:
			                   0 1px 0 #ccc,
			                   0 2px 0 #9c9c9c,
			                   0 3px 0 #bbb,
			                   0 4px 0 #9b9b9b,
			                   0 5px 0 #aaa;
			       }
			       .box4{
			               /* x y 模糊度 尺寸 颜色 */
			           box-shadow:inset 2px 2px 2px 3px #000;
			       }
		</p>
	   <div class="box1"> 面朝大海</div>
	   <div class="box2"> 春暖花开</div>
	   <div class="box3">春暖花开</div>
	   <div class="box4"></div>
	</section>
	<section class="exa6">
		<p>
			div{
	           width: 350px;
	           height: 150px;
	           margin: 50px auto;
	           border: 1px dashed purple;
	           text-align: center;
	           line-height: 150px;
	           font-size: 60px;
	           color: #ddd;
	           -webkit-text-stroke:1px #ff00ff;
	           text-shadow:
	               0 0 10px #f3c,
	               0 0 20px #f39,
	               0 0 40px #f33,
	               0 0 60px #f30;
	           text-transform:lowercase;
	       }
		</p>
		<div class="box1"> 面朝大海</div>
		<div class="box2">UPperCase</div>
	</section>
	<section class="exa7">
		<p>
			.exa7 div{
	            width:100px;
	            height: 500px;
	            background: goldenrod;
	            /*-webkit-transition: 5s;
	            -moz-transition: 5s;
	            -ms-transition: 5s;*/
	            /*transition: 5s;*/
	            /*transition: none;*/
	            opacity: 0;
	            color:#ccc;
	        }
	        .exa7 .on{
	            width: 1000px;
	            opacity: 1;
	            /*transition-property: all;
	            transition-duration: 5000ms;
	            !*transition-delay: 2000ms;*!
	            transition-timing-function: cubic-bezier(.75,.07,.93,.44) ;*/

	            transition:/*all*/ 5s /*2s*/ cubic-bezier(.75,.07,.93,.44);
	        }

			document.onclick = function () {
		            //box.style.WebkitTransition = box.style.transition = '5s';
		            //box.style.width = '500px';
		            //box.style.height = '500px';
		            box.className = 'on';
	        };
	        box.addEventListener('webkitTransitionEnd',function () {
	            fn();
	        });
	        box.addEventListener('transitionEnd',function () {
	            fn();
	        });
	        function fn() {
	            box.style.background = 'blue';
	        }

		</p>
		 <div id="box"></div>
	</section>
	<section class="exa8">
		<p>
			 .exa8 #box2{
           width: 600px;
           height: 600px;
           box-shadow: 0 0 5px #000;
           position: relative;
           margin: 50px auto;
       }
       .exa8 #move2{
           position: absolute;
           left: 0;
           top: 0;
           width: 100px;
           height: 100px;
           background: greenyellow;
       }

       .exa8 #box2 .on{
           /*-webkit-animation: move 6s linear;
           -moz-animation: move 6s linear;
           -ms-animation: move 6s linear;*/
           -o-animation: move 6s linear;
           animation: move 6s linear;
       }
       .exa8 #box2 .active{
           animation: active 2s linear 3 alternate;
           /*animation-fill-mode:forwards;*/
       }
       /*#box2 .hover{
           animation: on 6s linear infinite;
       }*/
       /*@-webkit-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-moz-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-ms-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @-o-keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       @keyframes move {
           from{ left:0 }
           to{ left: 500px }
       }
       */
       @keyframes on {
           0%{
               left:0;
               top:0;
           }
           25%{
               left:500px;
               top:0;
           }
           50%{
               left:500px;
               top:500px;
           }
           75%{
               left:0;
               top:500px;
           }
           100%{
               top:0;
               left: 0;
           }
       }
       @keyframes active {
           0%{
               top:0;
           }
           100%{
               top:500px
           }

       }
       .exa8 #box2:hover .hover{
           animation-play-state:paused;
       }

         box2.onmouseenter = function () {
            //move.className = 'hover';
        };
        var oActive = document.querySelector('#box2 .active');

        oActive.addEventListener('webkitAnimationEnd',fn);
        oActive.addEventListener('animationEnd',fn);

        function fn() {
            move2.style.background = 'blue';
        }
		</p>
		<div id="box2">
	        <div id="move2" class="active"></div>
	    </div>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		txt.innerHTML += ('['+txt.innerHTML.charAt(0)+']');

		document.onclick = function () {
		            //box.style.WebkitTransition = box.style.transition = '5s';
		            //box.style.width = '500px';
		            //box.style.height = '500px';
		            box.className = 'on';
        };
        box.addEventListener('webkitTransitionEnd',function () {
            fn();
        });
        box.addEventListener('transitionEnd',function () {
            fn();
        });
        function fn() {
            box.style.background = 'blue';
        }


        box2.onclick = function () {
            //move.className = 'hover';
            
        };
        var oActive = document.querySelector('#box2 .active');
        oActive.addEventListener('webkitAnimationEnd',fn2);
        oActive.addEventListener('animationEnd',fn2);
        function fn2() {
            move2.style.background = 'blue';
        }
	</script>
</body>
</html>